<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, RouterView, RouteRecordRaw } from 'vue-router';
import { ItemType } from "ant-design-vue"
import { menuRoutes } from "@/routes"
const selectedKeys = ref(['/home'])
const router = useRouter()

const items = () => {
  const renderItem = (list: RouteRecordRaw[]) => {
    const arr: ItemType[] = list.map(item => {
      return {
        key: item.path,
        label: item.name,
        children: item.children && renderItem(item.children)
      }
    })
    return arr
  }
  return renderItem(menuRoutes)
}

const onMenuItemClick = ({ key }: any) => {
  router.push(key)
  selectedKeys.value = [key]
}

</script>
<template>
  <a-layout class="layout" style="flex-direction: column;">
    <a-layout-header class="layout-header">
      <div class="logo"></div>
      <a-menu v-model:selectedKeys="selectedKeys" :items="items()" @click="onMenuItemClick" theme="dark"
        mode="horizontal" />
    </a-layout-header>
    <a-layout-content class="layout-content">
      <div class="content">
        <RouterView />
      </div>
    </a-layout-content>
  </a-layout>
</template>


<style lang="less" scoped>
.layout {
  height: 100vh;

  &-content {
    padding: 16px;

    .content {
      font-size: 32px;
      height: 100%;
      background-color: #fff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }
}
</style>